<!--组件-跟随设置-->
<template>
  <div class="bg">
    <!--名称-->
    <div v-if="showLine" class="line bg3"></div>
    <div v-else class="no-line"></div>
    <div class="title-row">
      <text class="font28 text2">{{T('跟单名称')+'   '}}</text>
      <text class="font24 text3">{{T('不超过8个字')}}</text>
    </div>
    <div :class="['input', 'bg3', inputSelect == 1 ? 'main-b1' : '']">
      <input class="input-content font28 text1" v-model="followNameB" type="text" :placeholder="T('跟单名称')" @focus="inputSelect=1" @blur="inputSelect=0">
    </div>

    <!--标签-->
    <div class="height40"></div>
    <div class="title-row">
      <text class="font28 text2">{{T('策略标签')+'   '}}</text>
      <text class="font24 text3">{{T('不超过3条且标签字数不超过6字')}}</text>
    </div>
    <div :class="['input', 'bg3', inputSelect == 2 ? 'main-b1' : '']">
      <input class="input-content font28 text1" v-model="mark" type="text" :placeholder="T('策略标签')" @focus="inputSelect=2" @blur="inputSelect=0">
      <div class="add main1" @click="addClick">
        <LImage class="add-icon" :src="Config.img('tianjia.png')"></LImage>
        <text class="font28 text1">{{T('添加')}}</text>
      </div>
    </div>
    
    <!--标签列表-->
    <div class="tag">
      <div class="tag-content" v-for="(item, index) in marksB" v-bind:key="index">
        <div class="tag-size bk3">
          <text class="font24 text3">{{item}}</text>
        </div>
        <div class="tag-select" @click="delectClick(index)">
          <LImage class="del-icon" :src="Config.img('shanchu_x.png')"></LImage>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

//功能
import modal from "@/_js/modal"; 
import Config from "@/_js/config"; 
const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  components: {
    
  },

  props:{
    followName:String,
    marks:{
      type:Array,
      default:[],
    },
    showLine:{
      type:Boolean,
      default:true,
    },
  },
  
  data() {
    return {
      T:T,
      of:true,
      Config:Config,
      inputSelect:0,

      followNameB:this.followName ? this.followName : '',
      mark:'',
      marksB:this.marks ? this.marks : [],
    };
  },

  mounted(){
  },

  methods:{
    /********************************** 对外开放方法*/
    //刷新视图
    refresh(followName, marks){
      this.followNameB = followName;
      this.marksB = marks;
    },

    //获取参数
    getParam(){
      var param = {'followName':this.followNameB, 
                   'marks':this.marksB};
      return param;
    },

    //检查
    checkError(){
      
      if (this.followNameB.length == 0) {
        modal.toast(T("请输入跟单名称"));
        return true;
      }

      if (this.followNameB.length > 8) {
        modal.toast(T("跟单名称不能超过8个字"));
        return true;
      }

      return false;
    },

    /********************************** 点击触发*/
    //添加标签
    addClick() {
      
      if (!this.mark.length) {
        return;
      }

      if (this.marksB.length >= 3) {
        modal.toast(T("策略标签不能超过3条"));
        return;
      }

      if (this.mark.length > 6) {
        modal.toast(T("策略标签不能超过6字"));
        return;
      }

      
      this.marksB.push(this.mark);
      this.mark = '';
    },

    //删除
    delectClick(index){
      this.marksB.splice(index,1);
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg{
  width: 670px;
}
.title-row{
  flex-direction: row;
  align-items: flex-end;
}

/*************** 其他*/
.line{
  width: 710px;
  height: 1px;
  margin-top: 40px;
  margin-bottom: 40px;
}
.no-line{
  width: 710px;
  height: 1px;
  margin-top: 40px;
}
.add{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 88px;
  border-radius: 16px;
  padding-left: 40px;
  padding-right: 40px;
  margin-right: -40px;
  margin-left: 20px;
}
.add-icon{
  width:20px;
  height:20px;
  margin-right:10px;
}

/*************** 输入框*/
.input{
  flex-direction: row;
  align-items: center;
  width: 670px;
  height: 88px;
  border-radius: 16px;

  border-width: 2px;
  border-color: transparent;

  margin-top: 20px;
  padding-left: 40px;
  padding-right: 40px;
}
.input-content{
  flex: 1;
  height: 88px;
  placeholder-color:#6E7488;
}
.input-line{
  width: 2px;
  height: 32px;
  margin-left: 20px;
  margin-right: 20px;
}

/*************** 标签*/
.tag {
  flex-direction: row;
  width: 670px;
}
.tag-content {
  margin-top: 60px;
  margin-bottom: 40px;
  margin-right: 30px;
}
.tag-size{
  font-display: row;
  justify-content: center;
  height: 64px;
  border-radius: 16px;

  border-style: dashed;
  border-width: 2px;
  
  padding-left: 32px;
  padding-right: 32px;



  margin-top: 8px;
  margin-right: 8px;
}
.tag-select{
  position: absolute;
  font-display: row;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;

  top: -8px;
  right: -8px;
}

.del-icon{
  width: 32px;
  height: 32px;
}

.height40{
  height: 40px;
}
</style>
